<template>
	<div class="bookdetail">
		<!-- {{booklist}} -->
		<div class="title">
			<img :src="`/api/public/showimg/`+booklist.pic" />
			<p>{{booklist.name}}</p>
			<p>{{booklist.author}}</p>
		</div>
		<div class="detail">
			<header>
				<label>{{booklist.name}}</label>
				<strong>{{booklist.author}}</strong>
			</header>
			<p>
				<label>价格:{{booklist.price}}</label>
			</p>
			<p>
				<label>标签/分类:{{booklist.type.name}}</label>
			</p>
			<p>
				<label>出版时间: {{Times(booklist.tmake)}}</label>
			</p>
			<p>
				月销量:{{booklist.salenum}}
			</p>
			<main>商品详情:{{booklist.info}}</main>

			<p class="btn">
				<el-button type="primary" @click="add()">加入购物车</el-button>

			</p>

		</div>
	</div>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		name: 'BookDetail',
		components: {
			// Loading
		},
		data() {
			return {
				booklist: [],
			}
		},
		computed: {
			...mapState('user', ['user'])
		},
		methods: {
			add() {
				this.bookid = this.$route.params.bookid;
				if (this.user != null) {
					this.$axios.get('/api/public/addCart/' + this.bookid).then(
						(res) => {
							if (res.data = 200) {
								this.$message({
									message: "添加成功",
									type: "success"
								})
								console.log(res)
							}

						}).catch((err) => {
						console.log(err);
					})
				} else {
					this.$message({
						message: "请你登录",
						type: "info"
					})
					this.$router.push('/login')
				}
			},
			Times(d) {
				let a = new Date(d).getTime();
				let date = new Date(a);
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '  ';

				let dateString = Y + M + D;
				return dateString;
			}
		},

		created() {
			this.bookid = this.$route.params.bookid;
			this.$axios.get('api/public/book/findById/' + this.bookid).then(
				(res) => {
					this.booklist = res.data.data
					console.log(this.booklist)
				}).catch((err) => {
				console.log(err);
			})

		},


	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.bookdetail {
		width: 80%;
		margin: 20px auto;
		display: flex;
		justify-content: space-around;
		overflow: hidden;
	}

	.title {
		width: 300px;
		text-align: center;
	}

	.title img {
		width: 108%;
	}

	.title p {
		font-size: 14px;
	}

	.detail {
		width: 75%;
	}

	.detail header {
		line-height: 45px;
		font-size: 16px;
		color: #5555ff;
	}

	.detail header label {
		font-weight: 800;
		font-size: 22px;
		margin-right: 30px;
	}

	.detail p {
		line-height: 35px;
		font-size: 14px;
		color: #b4b4b4;
	}

	.detail p label {
		font-weight: 800;
	}

	.detail main {
		line-height: 30px;
		font-size: 14px;
	}

	.detail article {
		line-height: 50px;
	}

	.detail article label {
		font-weight: 880;
		color: #5555ff;
	}

	.detail article a {
		text-decoration: none;
		padding: 0, 10px;
		color: #ffaa80;
	}

	.detail .btn {
		text-align: center;
	}

	.detail .btn button {
		width: 250px;
	}
</style>